<template>
    <Layout class="layout-container mask-all">
        <Spin fix v-if="loading" size="large"></Spin>
        <Content>
            <Layout class="layout-container padding-all">
                <Content>
                    <template v-for="tpl in tpls">
                        <PortalRow :row="tpl"></PortalRow>
                    </template>
                </Content>
            </Layout>
        </Content>
    </Layout>
</template>
<script type="text/javascript">
import { Layout, Content, Spin } from 'view-design';
import { PortalRow } from 'cloudbase-components';
import { currentMenuType, htmlToText } from 'config/utils';
//模板需要组件
import 'modules/portlet/components';

const URI_HOME = "/security/api/home/template";
//默认欢迎模板
const DEFAULT_HOME_TEMPLATE = [
    {
        //参考Row参数，其中class-name参数名改为className
        //gutter: 0,
        cols: [
            {
                //参考Col参数，其中class-name参数名改为className
                span: 24,
                //string | ComponentDefinition | ComponentConstructor, 组件id，或者组件对象 
                tag: 'Welcome',
                //传递给组件的参数
                //params: {},
                //参考Row参数，其中class-name参数名改为className
                //rows: []
            }
        ]
    }
];
export default {
    name: "Home",
    props: {
        params: Object
    },
    data() {
        return {
            loading: true,
            tpls: []
        };
    },
    methods: {
        loadTemplate() {
            this.$http.post(URI_HOME, {
                type: currentMenuType
            }).then((response) => {
                const res = response.data;
                if(res.success && res.data) {
                    const jsonStr = htmlToText(res.data);
                    const json = eval(`(${jsonStr})`);
                    if(json instanceof Array) {
                        this.tpls = json;
                    } else {
                        this.tpls = [json];
                    }
                } else {
                    this.tpls = DEFAULT_HOME_TEMPLATE;
                }
                this.loading = false;
            });
        }
    },
    mounted() {
        if(this.params) {
            if(this.params instanceof Array) {
                this.tpls = this.params;
            } else {
                this.tpls = [this.params];
            }
            this.loading = false;
        } else {
            this.loadTemplate();
        }
    },
    components: {
        Layout,
        Content,
        Spin,
        PortalRow
    }
}
</script>